<template>
	<view>
		<view class="head">
			<u-navbar :is-fixed="false" back-icon-color="#ffffff" title="" :background="{backgroundColor:'transparent'}" :border-bottom="false"></u-navbar>
			<view class="arc">
				
			</view>
		</view>
		<view class="red-info">
			<view class="u-flex">
				<view class="avatar" :style="{backgroundImage: `url(${info.avatarUrl})`}">
					
				</view>
				<view class="u-m-l-20 u-font-38 text-bold">
					{{info.userName?`${info.userName}的红包`:''}}
				</view>
				<view class="pin" v-if="info.type=='拼手气'">
					拼
				</view>
			</view>
			<view class="text-gray u-font-28 u-m-t-20">
				{{info.brief||'恭喜发财，大吉大利'}}
			</view>
			<view class="u-m-t-20 u-font-34" v-if="info.mineList">
				踩雷数字: {{info.mineList.join(',')}}
			</view>
			<view class="amount u-m-t-50" v-if="info.ownReceive">
				<text class="num">{{info.ownReceive|money}}</text>
				<text class="unit">元</text>
			</view>
			<navigator url="/pages/wallet/wallet" class="desc" hover-class="none" v-if="info.ownReceive">已存入零钱,可直接转账 <text class="iconfont icon-arrow-right"></text></navigator>
		</view>
		<view class="title text-gray" v-if="info.totalPacket">
			<text>已领取{{info.totalPacket-info.remainingPacket}}/{{info.totalPacket}}个，共{{(info.totalAmount-info.remainingAmount)|money}}/{{info.totalAmount|money}}元</text>
			<text v-if="!info.remainingPacket">，{{(info.endTime-info.createDate)|duration}}被抢光</text>
			<text>。</text>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="avatar" :style="{backgroundImage: `url(${item.avatarUrl})`}">
					
				</view>
				<view class="info u-p-t-6">
					<view class="u-flex u-row-between">
						<view class="u-font-32">
							{{item.userName}}
						</view>
						<view class="u-font-32" v-if="item.isUserGroup=='1'">
							{{item.amount|masterMoney}}元
						</view>
						<view class="u-font-32" v-else>
							{{item.amount|money}}元
						</view>
					</view>
					<view class="u-flex u-row-between u-m-t-6">
						<view class="text-gray">
							{{item.createDate|time}}
						</view>
						<view>
							<text class="text-gray" v-if="item.punishAmount>0"><text class="iconfont icon-bomb"></text>中雷</text>
							<text class="text-orange u-m-l-10" v-if="info.type!='普通'&&item.userId==info.bestLuckUserId"><text class="iconfont icon-crown"></text>手气最佳</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {redDetail,recList} from "@/api/red.js"
	export default {
		data() {
			return {
				id:'',
				info:{},
				list:[],
				sign:'',
				pageSize:10,
				nomore:false
			};
		},
		computed:{
			
		},
		filters:{
			masterMoney(val){
				if(isNaN(val)){
					return ''
				}
				if(!val){
					return val
				}
				return (val/100).toFixed(2).slice(0,-1)+'*'
			},
			money(val){
				if(isNaN(val)){
					return ''
				}
				if(!val){
					return val
				}
				return (val/100).toFixed(2)
			},
			time(val){
				if(!val){
					return val
				}
				const date = new Date(val)
				return date.Format('MM月dd日 HH:mm:ss')
			},
			duration(val){
				if(!val||val<0){
					return ''
				}
				const s = Math.round(val/1000)%60
				const m = Math.floor(val/(1000*60))%60
				const h = Math.floor(val/(1000*60*60))%24
				return `${h?`${h}小时`:''}${m?`${m}分钟`:''}${s}秒`
			}
		},
		onLoad({id}) {
			this.id = id
			this.initInfo()
			this.resetList()
		},
		onReachBottom() {
			this.moreList()
		},
		methods:{
			async initInfo(){
				this.info = await redDetail(this.id)
			},
			async resetList(){
				this.sign = ''
				this.list = []
				this.nomore = false
				await this.moreList()
			},
			async moreList(){
				if(this.moreList.lock){
					throw new Error('正在请求中')
				}
				if(this.nomore){
					return []
				}
				try{
					this.moreList.lock = true
					const list = await recList({id:this.id,startTime:this.sign,pageSize:this.pageSize})
					if(!list||list.length<this.pageSize){
						this.nomore = true
					}else{
						this.sign = list.slice(-1)[0].createDate
					}
					this.list.push(...list)
				}finally{
					this.moreList.lock = false
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.head{
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #ffffff;
		
		border-bottom-left-radius: 375rpx 128rpx;
		border-bottom-right-radius: 375rpx 128rpx;
		box-shadow: 0 0rpx 0rpx 4rpx rgba($color:#ebb81e,$alpha:0.8);
		background-color: #ef4e3c;
		
		.arc{
			height: 72rpx;
		}
	}
	.red-info{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding:  50rpx 0;
		.avatar{
			width: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background-size: cover;
			background-position: center;
		}
		.pin{
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			background-color: #cca766;
			color: #ffffff;
			border-radius: 10rpx;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
		.amount{
			color: #cca766;
			.num{
				font-size: 100rpx;
				font-weight: bold;
			}
			.unit{
				font-size: 36rpx;
			}
		}
		.desc{
			margin-top: 10rpx;
			color: #cca766;
		}
	}
	.title{
		padding: 0 30rpx 30rpx;
		
		
	}
	.list{
		padding-bottom: 100rpx;
		.item{
			padding-left: 30rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			position: relative;
			&::after{
				position: absolute;
				left: 150rpx;
				bottom: 0;
				right: 0;
				content: '';
				display: block;
				height: 1rpx;
				background-color: #eeeeee;
				transform: scaleY(0.5);
			}
		}
		.avatar{
			width: 100rpx;
			height: 100rpx;
			background-size: cover;
			background-position: center;
			flex-shrink: 0;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
		.info{
			flex:1;
			padding-right: 30rpx;
		}
	}
</style>
